<template>
  <view :class="[theme, 'root']">
    <view class="mt-50 fd-row jc-sb ai-center">
      <view class="relative as-start">
        <view class="absolute bottom-0 left-20 height-8 br-30 bg-23" style="width: 88%;" />
        <text class="relative color-2 fw-700 fs-36" style="z-index: 1; text-shadow: 0 0 8rpx rgba(86, 189, 252, 0.6);">
          {{ mapStatus[orderInfo.status] || "" }}
        </text>
      </view>

      <label v-if="orderInfo.expire_s">
        <text class="color-9">剩余确认时间：</text>
        <u-count-down class="fw-700" :color="$config.COLOR_10" separatorColor="#999" bg-color="transparent"
          :showBorder="false" :showDays="false" :timestamp="orderInfo.expire_s" fontSize="30" />
      </label>
    </view>

    <view class="bg-21 br-20 mt-30 fs-28" style="padding: 20rpx 30rpx;">

      <label class="jc-sb mt-20 mb-20">
        <text class="color-9">总价</text>
        <text class="color-27">
          <text class="fs-36 fw-700">{{ (orderInfo.price * orderInfo.num) || 0 }}</text>
          <text>CNY</text>
        </text>
      </label>
      <label class="jc-sb mt-20 mb-20">
        <text class="color-9">单价</text>
        <text>{{ orderInfo.price || 0 }}CNY</text>
      </label>
      <label class="jc-sb mt-20 mb-20">
        <text class="color-9">数量</text>
        <text>{{ orderInfo.num || 0 }}星核</text>
      </label>
      <label class="jc-sb mt-20 mb-20">
        <text class="color-9">订单编号</text>
        <text>{{ orderInfo.sn || "-" }}</text>
      </label>
      <label class="jc-sb mt-20 mb-20">
        <text class="color-9">交易时间</text>
        <text>{{ orderInfo.created_time || "-" }}</text>
      </label>
      <label v-if="orderInfo.mobile" @click="copyContact(orderInfo.mobile)" class="jc-sb mt-20 mb-20">
        <text class="color-9">联系电话</text>
        <text style="text-decoration: underline;">{{ orderInfo.mobile }}</text>
      </label>
      <view v-if="orderInfo.pay_img" @click="previewImage(orderInfo.pay_img)" class="fd-row jc-sb mt-20 mb-20">
        <text class="color-9">付款凭证</text>
        <u-image radius="12" width="200" height="300" :src="orderInfo.pay_img" />
      </view>
    </view>

    <view class="mt-24 p-30 bg-21 br-20">
      <label>
        <u-icon name="info-circle-fill" size="40" :color="$config.COLOR_10" />
        <text class="ml-10 fs-28 color-27">温馨提示</text>
      </label>
      <view class="mt-20 lh-2">
        <text>1、待支付状态下，点击“交易信息”可查看卖家收款信息。</text>
        <text>2、买家需要在2小时内完成支付，并且返回平台上传截图（支付信息）点击确认支付。否则将收到封禁惩罚。封禁措施：第一次2小时, 第二次4小时, 第三次8小时, 第四次永久封号。</text>
        <text>3、在支付时请务必截取相关支付信息，便于上传。</text>
        <text>4、已支付状态下，若卖家未在1小时内确认收款或发起申诉，则默认为交易成功。</text>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useMapState } from "@/common/libs/store";
import { onLoad } from "@dcloudio/uni-app";
import { ref } from "vue";

const { theme } = useMapState(["theme"]);
const { $config } = getApp().globalData || {};

const orderInfo = ref<AnyObject>({});

const mapStatus: AnyObject = { 1: "求购中", 2: "已完成", 3: "申诉中", 4: "待支付", 5: "已取消", 6: "已支付待确认" }

onLoad(({ order_id }: any) => {
  uni.showToast({ icon: "loading" });
  uni.request({
    url: "/tradeDetail",
    data: { order_id },
    success({ data }: any) {
      orderInfo.value = data || {};
      uni.hideToast();
    }
  })
});

const copyContact = (phoneNumber: string) => {
  uni.makePhoneCall({ phoneNumber });
}

const previewImage = (url: string) => {
  url && uni.previewImage({
    urls: [url]
  })
}

</script>
<style lang="scss">
page {
  background-color: $uni-bg-color-otc;
  color: $uni-text-color-otc;
}
</style>
<style lang="scss" scoped>
// scss

.root {
  padding: 0 30rpx;
}
</style>